<template>
  <div class="contaiter">
    <el-form
      ref="workExperience"
      :model="workExperience"
      label-position="left"
      label-width="150px"
      :rules="rules"
    >
      <el-form-item label="企业名称" required prop="companyName">
        <span slot="label" class="left-label">
          <span calss="cn-label">企业名称</span><br />
          <span class="en-label">Company Name</span>
        </span>
        <el-input
          v-model="workExperience.companyName"
          placeholder="请输入企业名称"
          style="width: 50%"
        />
      </el-form-item>
      <el-form-item label="期望行业" required prop="industry">
        <span slot="label" class="left-label">
          <span calss="cn-label">所属行业</span><br />
          <span class="en-label">Industry</span>
        </span>
        <el-cascader
          v-model="workExperience.industry"
          style="width: 50%"
          :options="areaDict"
          :show-all-levels="false"
          @change="businessAreaChange"
          placeholder="请选择所属行业，如：互联网/电子商务"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="职位名称" required prop="jobName">
        <span slot="label" class="left-label">
          <span calss="cn-label">职位名称</span><br />
          <span class="en-label">Occupation</span>
        </span>
        <el-input
          v-model="workExperience.jobName"
          placeholder="请输入职位名称"
          style="width: 50%"
        />
      </el-form-item>
      <el-form-item label="全日制/非全日制" required>
        <span slot="label" class="left-label">
          <span calss="cn-label">职位类型</span><br />
          <span class="en-label">Work Tpye</span>
        </span>
        <SelectCom
          :options="[
            { label: '实习', value: '0' },
            { label: '全职', value: '1' },
          ]"
          v-model="workExperience.jobType"
          @change="changeJobType"
          :defaultValue="workExperience.jobType"
        />
      </el-form-item>
      <el-form-item label="在职时间" required prop="resignationTime">
        <span slot="label" class="left-label">
          <span calss="cn-label">在职时间</span><br />
          <span class="en-label">Time Period</span>
        </span>
        <el-date-picker
          v-model="workExperience.resignationTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="工作描述" required prop="jobDescription">
        <span slot="label" class="left-label">
          <span calss="cn-label">工作描述</span><br />
          <span class="en-label">Job Description</span>
        </span>
        <el-input
          type="textarea"
          v-model="workExperience.jobDescription"
          placeholder="请输入工作内容，如：1.主要负责绩效考评相关工作2，完成照片绩效考核获得优秀评级"
          maxlength="2000"
          show-word-limit
          :rows="4"
        ></el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm('workExperience')"
          >确定</el-button
        >
        <el-popconfirm
          title="确定删除吗？"
          class="delete-icon"
          @confirm="deleteConfirm"
          v-if="showDel"
        >
          <i class="delete-icon" slot="reference"></i>
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { provinceAndCityData, getAreaDict } from "@/utils/frontDataDict.js";
import SelectCom from "./selectCom.vue";
export default {
  components: {
    SelectCom,
  },
  props: {},
  data() {
    return {
      provinceAndCityData,
      areaDict: [],
      workExperience: {
        companyName: "", //企业名称
        industry: "", //所属行业
        jobName: "", //职位名称
        jobType: "0", //职位类型 0实习 1全职
        entryTime: "", //入职时间
        resignationTime: "", //离职时间
        jobDescription: "", //职位描述
      },
      rules: {
        companyName: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
        ],
        industry: [
          { required: true, message: "请选择所属行业", trigger: "change" },
        ],
        jobName: [
          { required: true, message: "请输入职位名称", trigger: "blur" },
        ],
        major: [{ required: true, message: "请输入专业", trigger: "blur" }],
        resignationTime: [
          { required: true, message: "请选择在职时间", trigger: "change" },
        ],
        jobDescription: [
          { required: true, message: "请输入职位描述", trigger: "blur" },
        ],
      },
      index: null,
      showDel: false,
    };
  },
  methods: {
    businessAreaChange(e) {
      console.log(e);
    },
    handleCityChange(e) {
      console.log(e);
    },
    changeJobType(e) {
      this.workExperience.jobType = e;
    },
    cancel() {
      this.workExperience = {
        companyName: "", //企业名称
        industry: "", //所属行业
        jobName: "", //职位名称
        jobType: "0", //职位类型 0实习 1全职
        entryTime: "", //入职时间
        resignationTime: "", //离职时间
        jobDescription: "", //职位描述
      };
      this.showDel = false;
      this.index = null;
      this.$parent.$parent.$parent.closeFun("workExperience");
      this.$nextTick(() => {
        this.$refs["workExperience"].clearValidate();
      });
    },
    deleteConfirm() {
      this.$parent.$parent.$parent.deleteFun("workExperience", this.index);
      this.cancel();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.workExperience));
          let arr = data.resignationTime;
          data.industry = data.industry[1];
          data.entryTime = arr[0].split("T")[0];
          data.resignationTime = arr[1].split("T")[0];
          this.$parent.$parent.$parent.upDate(
            "workExperience",
            data,
            this.index
          );
          this.cancel();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    init(data, index) {
      data = JSON.parse(JSON.stringify(data));
      data.resignationTime = [data.entryTime, data.resignationTime];
      this.workExperience = data;
      this.index = index;
      this.showDel = true;
    },
  },
  created() {},
  mounted() {
    this.areaDict = getAreaDict();
  },
};
</script>

<style lang="less" scoped>
.delete-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url("../../../assets/images/delete_icon.png") no-repeat center
    center / cover;
}
/deep/ .el-date-editor .el-range-separator {
  width: 7%;
}
/deep/ .el-textarea__inner {
  padding-right: 65px;
}
</style>
